<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通知</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(
            function (){
                var textShow = false

                $.ajax({
                    url:"/student/getNotices",
                    type:"post",
                    success: function(data) {
                        let r = data;
                        if (r.code === 1) {
                            notices = r.data
                            $("#notices").html("")
                            $("#notices").append(
                                "<tr>\n" +
                                "                <th>标题</th>\n" +
                                "                <th>操作</th>\n" +
                                "            </tr>"
                            )
                            for(i=0; i<notices.length; i++){

                                $("#notices").append(
                                    "<tr>\n" +
                                    "                <td>\n" +
                                    "                    <label>"
                                    +notices[i].title+
                                    "</label>\n" +
                                    "                </td>\n" +
                                    "                <td>\n" +
                                    "                    <button " +
                                    "class = \"btnDetails\" "+
                                    "value = \""+notices[i].id+"\"" +
                                    ">详情</button>\n" +
                                    "                </td>\n" +
                                    "            </tr>"
                                )
                            }
                        } else {
                            alert(r.msg)
                        }
                    }
                })

                $("#notices").on(
                    "click",
                    "button",
                    function (){
                        $.ajax({
                            url:"/student/getNotice",
                            type:"post",
                            data: JSON.stringify({
                                "id": $(this).val()
                            }),
                            contentType:"application/json",
                            dataType:"json",
                            success: function(data) {
                                let r = data;
                                if (r.code === 1) {
                                    notice = r.data
                                    $("#title").text(notice.title)
                                    if(notice.teacherT == 1){
                                        $("#teacherName").text(notice.teacherName+"(辅导员)")
                                    }
                                    else if(notice.teacherT == 2){
                                        $("#teacherName").text(notice.teacherName+"(院长)")
                                    }
                                    $("#text").text(
                                        "        "
                                        +notice.title+"\n\n"
                                        +notice.text
                                    )
                                    if(!textShow){
                                        $("#close").click()
                                    }
                                } else {
                                    alert(r.msg)
                                }
                            }
                        })
                    }
                )

                $("#close").click(
                    function (){
                        if(textShow){
                            $("#text").hide()
                            textShow = false
                            $(this).text("展开")
                        }
                        else{
                            $("#text").show()
                            textShow = true
                            $(this).text("收起")
                        }
                    }
                )
            }
        )
    </script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body{
        display: flex;
        align-items: center;
        min-height: 100vh;
        flex-direction: column;
        background: gray;
      }

      .noticeBox{
          position: relative;
          width: 1000px;
          height: 500px;
          background: lightblue;
          border-radius: 8px;
          overflow: hidden;
          margin-top: 10px;
      }

      .topBox{
          position: relative;
          width: 1000px;
          height: 150px;
          background: lightseagreen;
          border-radius: 10px;
          overflow: hidden;
          margin-top: 20px;
      }

      textarea{
          background-color: lightgray;
          width: 1000px;
          height: 600px;
          font-size: x-large;
          margin-top: 10px;
      }

      table{
          display: flex;
          flex-direction: column;
      }

      th{
          border-collapse: separate;
          border-spacing: 0;
          border-radius: 8px;
          border: 2px solid #3251c0;
          height: 50px;
          width: 200px;
      }

      td{
          height: 50px;
          width: 200px;
      }

      label{
          color: black;
          font-size: 1em;
          letter-spacing: 0.05em;
      }

      button{
          border: none;
          outline: none;
          background: slategrey;
          cursor: pointer;
          border-radius: 4px;
          font-weight: 600;
          width: 100px;
          margin-bottom: 2px;
          margin-left: 5px;
      }
    </style>
</head>
<body>
    <div class="topBox">
        <h2>学院通知</h2>
        <table>
            <tr>
                <th>标题</th>
                <th>发布者</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>
                    <label id="title">标题</label>
                </td>
                <td>
                    <label id="teacherName">发布者</label>
                </td>
                <td>
                    <button id="close">展开</button>
                </td>
            </tr>
        </table>
    </div>
    <textarea id="text" hidden></textarea>
    <div class="noticeBox">
        <h2>所有通知</h2>
        <table id="notices">
        </table>
    </div>
</body>
</html>